<template>
    <transition name="moveR" mode="in-out">
        <section class="message-wrapper" v-show="toggled" :style="{height:pageHeight - 64 +'px'}">
            <div class="message-title">
                <span class="icon-box">
                    <i class="fa fa-times icon-style" @click.stop="deleteHandle()"></i>
                </span>
                <h3 class="title">消息列表</h3>
            </div>
            <section class="table-area">
                <el-table v-loading="loading" @cell-click='cheakMessage' tooltip-effect="dark" :data="Datalist" :height="tableHt" style="width: 100%">
                    <el-table-column prop="title" label="">
                        <template slot-scope="scope">
                            <span v-html="scope.row.title">{{scope.row.title}}</span><br>
                            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.msgContent" placement="left-end">
                                <div style="font-size:2px;color:#C0C4CC">{{scope.row.msgContent | strLength(20)}}</div>
                            </el-tooltip> -->
                        </template>
                    </el-table-column>

                </el-table>
            </section>
        </section>
    </transition>
</template>
<script>
    export default {
        name: "message",
        components: {
        },
        computed: {
            pageHeight() {
                return this.$store.getters.pageHeight;
            },
        },
        watch: {
            pageHeight(val) {
                this.calcHeight();
            }
        },
        data() {
            return {
                toggled: false,
                Datalist: [{
                        title:'<div>消息提示hello world</div>'
                }],
                loading: false,
                tableHt: null,
                unid: '',
            }
        },
        mounted() {

        },
        methods: {
            show() {
                this.toggled = !this.toggled;
                this.$nextTick(() => {
                    this.calcHeight();
                })
            },
            // convey(data) {
            //     this.Datalist.push(data);
            // },
            // delMessage() {
            //     const arr = []
            //     this.Datalist.map((item) => {
            //         if (item.unid !== this.unid) {
            //             arr.push(item)
            //         }
            //     })
            //     this.Datalist = arr
            // },
            cheakMessage(row) {
                this.unid = row.unid
                this.$refs.messageDialog.open(row);
            },
            deleteHandle() {
                this.toggled = false;
            },
            calcHeight() {
                this.tableHt = this.pageHeight - 110;
            },
        },
    }
</script>
<style lang="scss" scoped>
    .message-wrapper {
        width: 340px;
        position: absolute;
        right: 4px;
        z-index: 99999;
        background: #fff;
        box-shadow: -2px 0 0 #f5f5f5;
        top: 64px;

        .message-title {
            background: #f7f9fd;
        }

        .icon-box {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            font-size: 14px;
        }

        .icon-style {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FAAD14;
            transition: transform .3s linear;

            &:hover {
                transform: rotate(90deg);
            }
        }

        .title {
            display: inline-block;
        }

        /deep/ .el-table thead {
            display: none;
        }
    }

    .moveR-enter-active,
    .moveR-leave-active {
        transition: all 0.5s linear;
        transform: translateX(0);
    }

    .moveR-enter,
    .moveR-leave {
        transform: translateX(100%);
    }

    .moveR-leave-to {
        transform: translateX(100%);
        position: absolute;
        opacity: .3;
    }
</style>